<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/modules/woms/front/include/import-tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <title>故障核实</title>
    <link href="${ctxStatic}/css/main.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/style.css" rel="stylesheet" type="text/css">
    <link href="${ctxStatic}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${ctxStatic}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/js/wo.js"></script>
    <script src="${pageContext.request.contextPath}/static/layer-v2.3/layer/layer.js"></script>
    <style type="text/css">
        .phone_txt{
            position: relative;
        }
        .phone_txt input{
            padding-left: 6rem;
            color: #666;
        }
        .phone_txt label{
            font-size: 1.2rem;
            position: absolute;
            top: 1.5rem !important;
            left: .5rem;
            color: #666;
        }
        .inputTxt input {
            height: 3.5rem;
            line-height: 3.5rem;
            border: .1rem #eee solid;
            background-color: #fff;
            font-size: 1.3rem;
            text-indent: 1.2em;
        }
        .inputTxt textarea {
            width: 100% !important;
        }
    </style>
</head>
<body >
<div class="warpe">
    <form:form id="topicForm" modelAttribute="event"  method="post" >
        <input type="hidden" name="id" id="id" value="${event.id}">
        <div class="main" id="zrgsDiv">
            <div>责任归属</div>
            <div class="gdTxt gdTxt2">
                <form:select path="zrgsType"  class="form-control input-sm">
                    <form:option value="" label="请选择免责/非免责"/>
                    <form:options items="${fns:getDictList('zrgs_type')}" itemLabel="label" itemValue="value"  htmlEscape="false"/>
                </form:select>
            </div>
            <div>故障类型</div>
            <div class="gdTxt gdTxt2">
                <form:select path="faultType"  class="form-control input-sm">
                    <form:option value="" label="请选择真实故障类型"/>
                    <form:options items="${fns:getDictList('fault_type')}" itemLabel="label" itemValue="value"  htmlEscape="false"/>
                </form:select>
            </div>
            <div>劳务派遣</div>
            <div class="gdTxt gdTxt2">
                <form:select path="lwpqType"  class="form-control input-sm">
                    <form:option value="" label="请选择"/>
                    <form:options items="${fns:getDictList('lwpq_type')}" itemLabel="label" itemValue="value"  htmlEscape="false"/>
                </form:select>
            </div>
            <div>描述</div>
            <div class="inputTxt" style="margin-top: 1rem;">
                <textarea rows="5" cols="" id="zrgsDesc" name="zrgsDesc"     maxlength="500"   onfocus="emptycontext('zrgsDesc')">这是一个免责或非免责原因的详细描述，最大字符500</textarea>
            </div>
            <div class="upload">
                <ul data-am-widget="gallery" class="am-gallery am-gallery-overlay" data-am-gallery="{ pureview: true }" id='zrgsPics'>
                    <li class="uploadimg" onclick="chImgs('zrgsPics');">
                        <a  style="font-size:3rem;" >+
                        </a>
                    </li>
                </ul>
            </div>

            <div class="work_bth">
                <a onclick="receive();">提交</a>
            </div>
        </div>


    </form:form>

    </div>
</body>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    var url=location.href.split('#')[0];
    var result =false;
    $.ajax({
        type : "POST",
        url : "${ctx}/engineer/jsApi?t="+Date.parse(new Date()),
        cache : false,
        dataType : "json",
        async: false,
        data:{url:url},
        success : function(data) {
            result= true;
            if(data.success){
                result = JSON.parse(data.msg);
                init();

            }

        }
    });

    function init(){
        if(result && wx){
            wx.config({
                debug: false,
                appId:  'wx3a0b5ce9478e1365',
                timestamp: result['timestamp'],
                nonceStr: result['nonceStr'],
                signature: result['signature'],
                jsApiList: [
                    'checkJsApi',
                    'chooseImage',
                    'previewImage',
                    'uploadImage',
                    'downloadImage'
                ]
            });
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: [
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage'
                    ]
                });
            });
            wx.error(function (res) {
                alert('wx.error: '+JSON.stringify(res));
            });
        }else{
            setTimeout(function(){
                init();
            },1000)
        }
    }

    //5 图片接口
    //5.1 拍照、本地选图
    var images = {
        localId: [],
        serverId: []
    };
    function chImgs(imgId){
        wx.chooseImage({
            sizeType: ['compressed'],
            sourceType: ['camera'],
            success: function (res) {
                images.localId = res.localIds;
                // alert('已选择 ' + res.localIds.length + ' 张图片');
                if (images.localId.length == 0) {
                    return;
                }
                var i = 0, length = images.localId.length;
                images.serverId = [];
                function upload() {
                    wx.uploadImage({
                        localId: images.localId[i],
                        success: function (res) {
                            i++;
                            images.serverId.push(res.serverId);
                            pai(res.serverId,imgId);
                            if (i < length) {
                                upload();
                            }
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                }
                upload();

            }
        });
    }


    //拍图上传
    function pai(mediaId,imgId ){

        $.ajax({
            url:'${ctx}/engineer/uploadPic',
            type:'post',
            data:{mediaId:mediaId},
            dataType:'json',
            timeout:20000,
            success:function(data){
                if(data.success){
                    $('#'+imgId).prepend('<li class="upload_bth" id="p'+mediaId+'"  ><img class="'+imgId+'" src='+data.msg+' /><p><a onclick="delImg(\'p'+mediaId+'\')" class="color_r">删除</a> </p> </li>');
                }else{
                    layer.alert(data.msg, {icon: 6});
                }
            },
            error:function(e){
                layer.alert('服务器忙!', {icon: 6});
            }
        });
    }



    // 记录输入的文字
    function trim(str){
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }




   function receive(){
    var zrgsType=$("#zrgsType").val();
    if(trim(zrgsType)==''){
        layer.msg('请选择责任归属');
        return false;
    }

    var faultType=$("#faultType").val();
    if(trim(faultType)==''){
        layer.msg('请选择故障类型');
        return false;
    }

    var lwpqType=$("#lwpqType").val();
    if(trim(lwpqType)==''){
        layer.msg('请选择是否劳务派遣');
        return false;
    }
    var zrgsDesc=$("#zrgsDesc").val();
    if(trim(zrgsDesc)==''||zrgsDesc=='这是一个免责或非免责原因的详细描述，最大字符500'){
        layer.msg('请输入描述内容');
        return false;
    }
    var data = $("#topicForm").serialize();
    var zrgsPics= $('.zrgsPics');
    if(zrgsPics.length>0){
        $.each(zrgsPics,function(i,pic){
            data+='&zrgsPics='+$(pic).attr('src');
        });
    }else{
        layer.msg('请上图片');
        return false;
    }

    layer.confirm('确认要提交吗？',{
            btn: ['确认','取消']
        }
        , function(index){//用户点击了确认按钮
            layer.close(index);
            $(".work_bth").hide();
            $.ajax({
                type: "POST",
                url:'${ctx}/engineer/receive',
                data: data,
                dataType:'json',
                success : function(json){
                    if(json.success){
                        layer.alert('提交成功!',{icon: 6}, function(index){
                            layer.close(index);
                            //wx.closeWindow();
                            //说要跳转到处理页面
                            window.location.href = "${ctx}/engineer/processUI?id=${event.id}";
                        });
                    }else{
                        layer.alert(json.msg, {icon: 6});
                    }
                  }
                });
            }, function(index){//用户点击了取消
                layer.close(index);
        });
   }



    function emptycontext(contentId){
        if(contentId=='zrgsDesc'){
            if("这是一个免责或非免责原因的详细描述，最大字符500"===trim($("#zrgsDesc").val())){
                $("#zrgsDesc").val("");
            }
        }
        if(contentId=='faultDesc'){
            if("这是一个故障原因的详细描述，最大字符500"===trim($("#faultDesc").val())){
                $("#faultDesc").val("");
            }
        }
        if(contentId=='lwpqDesc'){
            if("这是一个需要或不需要劳务派遣原因的详细描述，最大字符500"===trim($("#lwpqDesc").val())){
                $("#lwpqDesc").val("");
            }
        }

    }

    function delImg(id){
        $("#"+id).remove();
    }

</script>


<!--相册放大预览必要文件-->
<link rel="stylesheet" href="${ctxStatic}/css/amazeui.min.css" />
<script src="${ctxStatic}/js/amazeui.js"></script>
</html>
